<template>
  <main>
    <p class="other-city-info">
      你正在预览{{ getCity }}的天气信息<span v-show="isShow"
        >，可以通过右上角的"+"号按钮保存起来</span
      >
    </p>
    <ul class="other-city-weather container">
      <li>当日气温是：{{ lives.temperature }}摄氏度</li>
      <li>当日天气是：{{ lives.weather }}</li>
      <li>当日风向是：{{ lives.winddirection }}风</li>
      <li>当日风力是：{{ lives.windpower }}级</li>
    </ul>
    <hr />
    <div class="container">
      <weather-forecasts></weather-forecasts>
    </div>
  </main>
</template>

<script>
import WeatherForecasts from '@/components/WeatherForecasts'
import { getLives } from '@/api/weather'

export default {
  name: 'OtherWeather',
  components: {
    WeatherForecasts
  },
  data() {
    return {
      lives: '',
      isShow: true,
      savecitys: []
    }
  },

  computed: {
    getAdcode() {
      return this.$route.params.adcode
    },
    getCity() {
      return this.$route.query.serach
    }
  },
  created() {
    let res = localStorage.getItem('savecitys')
    if (!res) {
      localStorage.setItem('savecitys', JSON.stringify([]))
    } else {
      this.savecitys = JSON.parse(res)
    }
    this.isSave()
    this.getData()
  },
  // mounted() {
  //   this.getData()
  // },
  methods: {
    async getData() {
      const getLivesRes = await getLives(this.getAdcode)
      this.lives = getLivesRes.data.lives[0]
    },
    isSave() {
      const res = this.savecitys.find(item => item.city == this.getCity)
      if (res) {
        this.isShow = false
      } else {
        this.isShow = true
      }
    }
  }
}
</script>

<style scoped>
main {
  margin-top: 80px;
  font-size: 16px;
  color: #fff;
}
hr {
  margin-top: 24px;
  border-color: rgb(255 255 255 / 0.1);
}
main .other-city-info {
  height: 40px;
  background-color: rgb(0 78 113 / 0.9);
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  box-sizing: border-box;
}
main .other-city-weather {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 24px;
  text-align: center;
}
</style>
